<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vuejs组件化学习-实现todolist</title>
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
	<style type="text/css">
		.finished{text-decoration: line-through}
	</style>
</head>
<body>
	<div id="container">
		<div id="app" class="col-md-4 col-md-offset-4">
			<div>
				<input type="text" v-model="newTodoContent" @keyup.enter="addNewTodo"/>
			</div>
			<my-task :list="tasks"></my-task>
			<!-- <my-task :list="[{content: 'first content', finished: true}]"></my-task> -->
			<div v-show="ok">It's OK</div>
			<span :style="styleObject">Hello World</span>
		</div>

		<template id="task-template">
			<h1>当前任务总数：<span v-if="remaining">{{remaining}}</span></h1>
			<table class="table table-hover table-condensed">
				<tr><td>content</td><td>finished</td><td>op</td></tr>
				<template v-for="task in list"">
					<tr>
						<td :class="{'finished':task.finished}">{{task.content}}</td>
						<td>{{task.finished}}</td>
						<td><button class="button btn-primary" @click="toggleStatus(task)">click</button> | <button class="button btn-danger" @click="delTask(task)">delete</button></td>
						<!-- <td><button class="button btn-primary" @click="task.finished = !task.finished">click</button></td> -->
					</tr>
				</template>
			</table>

			
		</template>

		
		<!-- <div v-if="isActive">isActive</div> -->
		<!-- <div v-else>World</div> -->
		<!-- <span v-bind:style="styleObject">Hello World</span> -->
	</div>	
</body>
<!-- <script src="vue.js"></script> -->
<script src="http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
<script>
	Vue.component('my-task', {	//注册组件类似于注册新标签，理解为创建my-task对象
		template: "#task-template",
		props: ['list'],	//理解为类的成员变量,实例需要传递参数至此变量，这样template才可以访问
		methods: {
		    toggleStatus: function (task) {
		      task.finished = ! task.finished;
		    },
		    delTask: function(task){
		    	this.list.$remove(task);
		    }
		},
		computed: {
			remaining: function(){
				return this.list.filter(function(task){
					return !task.finished;
				}).length;
			}
		}
	});
	new Vue({
		el: "#app",
		data: {
			newTodoContent: '',
			tasks:[
				{content: 'first content', finished: false},
				{content: 'second content', finished: false},
				{content: 'third content', finished: false},
				{content: 'fourth content', finished: true}
			],
			styleObject:{
				color:'red',
				fontSize: '20px',
			},
			ok: false,
		},
		methods: {
			addNewTodo: function(){
				this.tasks.push({content: this.newTodoContent, finished: false});
				this.newTodoContent = '';
				console.log(this.newTodoItem);
			},
		}
		
	});
</script>
</html>
</html>